import React from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
import { useTheme } from "@/contexts/ThemeContext";
import { Ionicons } from "@expo/vector-icons";

interface RequestStatusProps {
  status: "pending" | "accepted" | "rejected";
  onAccept: () => void;
  onReject: () => void;
}

const RequestStatusComponent: React.FC<RequestStatusProps> = ({
  status,
  onAccept,
  onReject,
}) => {
  const { colors } = useTheme();

  if (status === "pending") {
    return (
      <View style={styles.actionContainer}>
        <TouchableOpacity
          style={[styles.actionButton, { backgroundColor: colors.primary }]}
          onPress={onAccept}
        >
          <Ionicons name="checkmark" size={18} color="#fff" />
          <Text style={styles.actionText}>接受</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={[
            styles.actionButton,
            { backgroundColor: colors.status.error },
          ]}
          onPress={onReject}
        >
          <Ionicons name="close" size={18} color="#fff" />
          <Text style={styles.actionText}>拒绝</Text>
        </TouchableOpacity>
      </View>
    );
  }

  if (status === "accepted") {
    return (
      <View style={styles.statusContainer}>
        <Text style={[styles.statusText, { color: colors.status.success }]}>
          已接受
        </Text>
      </View>
    );
  }

  if (status === "rejected") {
    return (
      <View style={styles.statusContainer}>
        <Text style={[styles.statusText, { color: colors.status.error }]}>
          已拒绝
        </Text>
      </View>
    );
  }

  return null;
};

const styles = StyleSheet.create({
  actionContainer: {
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
  },
  actionButton: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 10,
    paddingVertical: 6,
    borderRadius: 4,
    gap: 4,
  },
  actionText: {
    color: "#fff",
    fontSize: 12,
    fontWeight: "500",
  },
  statusContainer: {
    paddingHorizontal: 10,
  },
  statusText: {
    fontSize: 14,
    fontWeight: "500",
  },
});

export default RequestStatusComponent;
